import React,{useState,useEffect} from 'react'
import axios from 'axios'
// css in js 就是以js的方式来书写css
const Style = {
   "marginLeft":"30px"
}
function App() {
   // 在react里复杂数据类型不能直接修改，需要拷贝来修改
  const [ipt,setIpt] = useState("")
  const [arr,setArr] = useState([]) // arr是所有的
  const [downarr,setDownArr] = useState([])
  const [ingArr,setIngArr] = useState([])
  const [downnum,setDownnum] = useState(0)
  const [ingnum ,setIngnum] = useState(0)
  let ingchange = (e,index)=>{
      console.log(e.target.checked,index);
      let newingarr = [...ingArr]
      newingarr[index].flag = e.target.checked
      setIngArr(newingarr)
      let newdownarr = [...downarr]
      newdownarr.push( newingarr[index])
      setDownArr(newdownarr)
      newingarr.splice(index,1)
      setIngArr(newingarr)

  }
  let changeIpt = (e)=>{
        setIpt(e.target.value)
        
  }
  let addfn = ()=> {
      console.log(ipt);
      let obj = {
          id: Math.random(),
          flag:false,
          down:"未完成",
          tit:ipt
      }
      let newimgarr = [...ingArr] // 浅拷贝，在react不能直接去修改原来数组，浅拷贝
      newimgarr.push(obj)
      setIngArr(newimgarr)
      setIpt("")
    // 新增进来也是对象，新增的内容要和模拟的数据字段一致
    //   {
    //     "id":"@id",
    //     flag:false,
    //     "down|1":["已完成","未完成"],
    //     tit:"@ctitle(8,10)"
    //   }
  }
  useEffect(()=>{
     axios.get("/api/list").then(res=>{
        setArr(res.data)
        let ing =  res.data.filter(item=>item.down==="未完成")
        let ing1 =  res.data.filter(item=>item.down==="已完成")
         setIngArr(ing)
         setIngnum(ing.length)
         setDownArr(ing1)
         setDownnum(ing1.length)
     })
  },[])
  let deldownfn = (index)=>{
    let newdownarr = [...downarr]
    newdownarr.splice(index,1)
    setDownArr(newdownarr)
  }
  let delINGFN = (index)=>{
      let newIngarr = [...ingArr]
      newIngarr.splice(index,1)
      setIngArr(newIngarr)
  }
  useEffect(()=>{
    setDownnum(downarr.length)
    setIngnum(ingArr.length)

  },[downarr,ingArr])
  return (
    <div>
        <input type="text" value={ipt} onChange={changeIpt} /> <button onClick={addfn}>新增</button>
        <h1>已完成个数{downnum}个  未完成个数{ingnum}个</h1>
        <h1>已完成</h1>
        {
            downarr && downarr.length ? downarr.map((item,index)=>{
                return <li key={index}>
                    <input type="checkbox" checked={item.flag} onChange={(e)=>ingchange(e,index)} />
                    <span>{item.tit}</span>
                    <span style={Style} onClick={()=>deldownfn(index)}>x</span>
                </li>
            }):""
        }
        <h1>正在进行中</h1>
        {
            ingArr && ingArr.length ? ingArr.map((item,index)=>{
                return <li key={index}>
                    <input type="checkbox" checked={item.flag} onChange={(e)=>ingchange(e,index)} />
                    <span>{item.tit}</span>
                    <span style={Style} onClick={()=>delINGFN(index)}>x</span>
                </li>
            }):""
        }
    </div>
  )
}

export default App